{% extends "base.html" %}
{%block header_js %}
    <script type="text/javascript" src="http://111.161.25.9/static/js/jquery.js"></script>
    <script type="text/javascript" src="/static/js/highcharts.js"></script>
    <script type="text/javascript" src="/static/js/exporting.js"></script>
  <script type="text/javascript">
      $(document).ready(function() {
             $.get('/service/getchart/?table={{table}}&items=cpu&title=cpu_usage&div=contain_cpu',function(data){ eval(data); });
             $.get('/service/getchart/?table={{table}}&items=memory&title=mem_usage&div=contain_mem',function(data){ eval(data); });
             $.get('/service/getchart/?table={{table}}&items=load&title=load&div=contain_load',function(data){ eval(data); });
             $.get('/service/getchart/?table={{table}}&items=eth0-send:eth0-recv&title=eth0&div=contain_eth0',function(data){ eval(data); });


        });
    </script>
{% endblock %}

<body>
{% block header %}
{% include "host-menu.html" %}
{% endblock %}

{% block content %}
<div class="wrap">
	<div class="wrap_right tree">
    	<div class="shenqing1">
        	<h5 style="float:left;width:88%;">机房基本信息</h5>
        </div>
        
        <div class="shenqing10">
			<table width="84%" border="1" cellspacing="0" cellpadding="0" bordercolor="#8CBDE3" style="border-collapse:collapse;">
				<tr>
					<td class="textalingR">机房名称</td>
					<td style="color:#2E74D1;">{{idc.name}}</td>
				</tr>
				<tr>
					<td class="textalingR">主机数量</td>
					<td style="color:#2E74D1;">{{host_total}}</td>
				</tr>
				<tr>
		            <td class="textalingR">正常数量</td>
		            <td style="color:#2E74D1;">{{host_normal}}</td>
				</tr>
				<tr>
					<td class="textalingR">异常数量</td>
					<td style="color:#2E74D1;">{{host_error}}</td>
				</tr>

			</table>
		</div>
		
		<div class="shenqing1">
			<h5 style="float:left;width:88%;">服务情况</h5>
		</div>
		
		<div class="shenqing10">
		    <table width="84%" border="1" cellspacing="0" cellpadding="0" bordercolor="#8CBDE3" style="border-collapse:collapse;">
				<tr>
				    <td width="62" class="textalingR">总计算能力</td>
				    <td width="88" style="color:#2E74D1;">{{host_cores}}</td>
			    </tr>

				<tr>
				    <td width="62" class="textalingR">目前负载</td>
				    <td width="88" style="color:#2E74D1;">{{host_load}}</td>
			    </tr>
				<tr>
				    <td class="textalingR">目前负载率</td>
				    <td style="color:#2E74D1;">{{idc_usage}}%</td>
			    </tr>
				<tr>
				    <td class="textalingR">机房可用率</td>
				    <td style="color:#2E74D1;">{{idc_avail}}</td>
				</tr>
			</table>
		</div>	
</div>

<div class="wrap_left right">
    	<div class="shenqing1">
	        <h5 style="float:left;width:96%;margin-bottom:10px;">主机列表</h5>
	        <form method="post" action="/host/search/">
		        <input type="text" name="key" class="word_in"/>
		   	    <input type="submit" value="搜索" class="btn_search"/>
   	  		</form>
		<a href="/host/add/" class="new_zeng" >新增主机</a>
   	  	</div>
		<div class="biaoge">
		<table width="100%"  border="0" cellpadding="0" cellspacing="0" class="table2">
			<tr>
				<th width="15%">主机</th>
				<th width="10%">所属机房</th>
				<th width="10%">CPU</th>
				<th width="10%">网络</th>
				<th width="10%">负载</th>
				<th width="10%">硬盘</th>
				<th width="10%">内存</th>
				<th width="12%">启动时间</th>
				<th width="5%">状态</th>
				<th width="8%">操作</th>
			</tr>
            {% for host in host_list %}
			<tr class="{% cycle  g1 g2 %}">
				<td class="td_left"><a href="/host/detail/?id={{host.id}}">{{ host.ip }}</a></td>
				<td class="td_mid">{{host.idc}}</td>
				<td>{{host.r_cpu_usage}}</td>
				<td>{{host.r_network}}</td>
				<td>{{host.r_load}}</td>
				<td>{{host.r_disk}}</td>
				<td>{{host.r_mem_usage}}</td>
				<td>{{host.setup_time}}</td>
				<td><img src="/static/img/hr.gif" width="16" height="16" alt="" /></td>
				<td>
				<a href="monitordetail.html">
				<img src="/static/img/edit-icon.gif" alt="edit" width="16" height="16" border="0" />
				</a>
				<a href="/host/clone/">
				<img src="/static/img/save-icon.gif" alt="save" width="16" height="16" border="0" />
				</a>
				</td>
			</tr>
            {% endfor %}
			</table>
		<div class="page_w">
			<div class="page_font">总共X条记录</div>
				<div class="page_r">
				    <ul>
				    <li>
					    <select name="select" class="frist">
					    	<option>第1页</option>
					    </select>
				    </li>
				    <li>每页15条,共1页</li>  
				    <li><a href="#" class="page_btn" onMouseDown="this.className='page_btn_d'"><span><ins>末页</ins><img src="/static/img/new/page_ico4.gif" /></span></a></li>
				    <li><a href="#" class="page_btn" onMouseDown="this.className='page_btn_d'"><span><ins>下一页</ins><img src="/static/img/new/page_ico3.gif"/></span></a></li>
				    <li><a href="#" class="page_btn" onMouseDown="this.className='page_btn_d'"><span><img src="/static/img/new/page_ico2.gif"/><ins>上一页</ins></span></a></li>
				    <li><a href="#" class="page_btn" onMouseDown="this.className='page_btn_d'"><span><img src="/static/img/new/page_ico1.gif"/><ins>首页</ins></span></a></li>
				    </ul>
				</div>
			</div>
	    </div>
	</div>

</div>
{% endblock %}

</body>
</html>
